<template>
  <div>
    <!-- 这里就是变量管理封装的内容 -->
    <!-- 左边部分 -->
    <div class="management">
      <!-- 左边目录 -->
      <div class="catalog">
        <el-tree
          ref="tree"
          :data="catalog"
          :props="defaultProps"
          node-key="item_id"
          :default-expanded-keys="[38]"
          :default-checked-keys="[39]"
          @node-click="handleNodeClick"
        />
      </div>
      <!-- 右边详情 -->
      <div class="Details">
        <Details :directory-list="directoryList" />
      </div>
    </div>

  </div>
</template>

<script>
// 获取模板下目录列表  获取目录下模块及变量
import { getTemplateQuestionList } from '@/api/stencil'
// 详情展示页
import Details from './Details.vue'
export default {
  components: {
    Details
  },
  props: {
    catalog: { type: Array, default: () => [] } // 目录
  },
  data() {
    return {
      database_id: '', // 数据库id
      template_id: '', // 模板id
      // catalog: [], // 目录
      defaultProps: {
        children: 'items',
        label: 'item_name',
        disabled: 'disabled'
      },
      directoryList: [] // 存放用户点击左侧目录拿到的数据
    }
  },
  watch: {
    catalog: {
      handler(newname, oldname) {
        console.log('监听被触发', this.catalog)
        if (this.directoryList.length === 0) {
          // 如果长度等于0 那么就调用
          // console.log('等于0了')
          if (this.catalog[0].items.length >= 1) {
            this.newGetTemplateQuestionList(this.database_id, this.template_id, this.catalog[0].items[0].item_id)
          } else {
            this.newGetTemplateQuestionList(this.database_id, this.template_id, this.catalog[0].item_id)
          }
        }
      }
    }
  },
  async created() {
    this.database_id = this.$store.getters.database_id === '' ? this.$store.state.user.userInfo.id : this.$store.getters.database_id
    this.template_id = this.$store.state.database.template_id
    // console.log(this.database_id, this.template_id)
    // const res = { database_id: this.database_id, template_id: this.template_id }
    // const data = await getTemplateDirectoryList(res)
    // this.catalog = data
    // console.log('结果1', this.catalog)
    // if (this.catalog[0].items.length >= 1) {
    //   this.newGetTemplateQuestionList(this.database_id, this.template_id, this.catalog[0].items[0].item_id)
    // } else {
    //   this.newGetTemplateQuestionList(this.database_id, this.template_id, 39)
    // }
  },
  methods: {
    async   handleNodeClick(data) {
      console.log(data) // 这里就是选中的数据
      // 用户点击触发之后需要判断用户点击的是否有items如果有就不做处理 如果没有在调用接口发送请求
      if (data.items) {
        if (data.items.length >= 1) {
          console.log('进来说明有items')
          return
        }
      }
      // 这里就是正常的调用接口
      this.newGetTemplateQuestionList(this.database_id, this.template_id, data.item_id)
    },
    // 封装获取目录下模块及变量
    async newGetTemplateQuestionList(database_id, template_id, item_id) {
      console.log('封装获取目录下模块及变量', database_id, template_id, item_id)
      const res = { database_id, template_id, item_id, need: ['need_question', 'need_option', 'need_hide'] }
      const list = await getTemplateQuestionList(res)
      console.log('拿到数据', list)
      this.directoryList = list.data.data
    }
  }
}
</script>

<style lang="scss" scoped>
.management {
    display: flex;
    width: 100%;
    height: 500px;
    background-color: #f7f7f7;
    // margin: 0 auto;
    padding: 20px;

    .catalog {
        width: 15%;
        height: 100%;
        background-color: #fff;

    }
    .Details {
           flex: 1;
           height: 100%;
          margin-left:2%;
          // background-color: #5cf;
    }
}
</style>
